<template>
  <el-card class="box-card" shadow="hover" @click="goDetail">
    <div class="content">
      <div class="left">
        <div class="hospital_name">
          {{ hospitalInfo.hosname }}
        </div>
        <div class="tip">
          <div class="level">
            <SvgIcon name="zan" width="16px" height="16px" class="icon"></SvgIcon>
            <span>{{ hospitalInfo.param.hostypeString }}</span>
          </div>
          <div class="time">
            <SvgIcon name="shizhong" width="16px" height="16px" class="icon"></SvgIcon>
            <span>每天{{ hospitalInfo.bookingRule?.releaseTime }}放号</span>
          </div>
        </div>
      </div>
      <div class="right">
        <img :src="`data:image/jpeg;base64,${hospitalInfo.logoData}`" alt="" />
      </div>
    </div>
  </el-card>
</template>

<script setup lang="ts">
//接受父组件传递过来的 props-> 即为已有医院的数据
let props = defineProps(['hospitalInfo'])

//引入 路由
import { useRouter } from 'vue-router'
//创建路由器对象
let $router = useRouter()

//点击医院卡片的时候调转到医院详情页面
//点击某一个推荐项
const goDetail = () => {
  //医院编码
  //console.log(props.hospitalInfo.hoscode);
  //点击推荐项，进入医院详情页，将来需要携带 query参数(医院的编码)
  $router.push({ path: '/hospital/register', query: { hoscode: props.hospitalInfo.hoscode } })
}
</script>

<style scoped lang="scss">
.content {
  display: flex;
  justify-content: space-between;

  .left {
    width: 60%;
    .tip {
      margin-top: 20px;
      color: #7f7f7f;
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
      .icon {
        position: relative;
        top: 2px;
      }
      .level .time {
        display: flex;
        align-items: center;

        span {
          margin-left: 5px;
        }
      }
    }
  }

  .right {
    img {
      width: 50px;
      height: 50px;
    }
  }
}
</style>
